<template>
  <div class="payment">
    <header>
      <van-nav-bar
        title="结算"
        left-text="返回"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <section class="address">
      <div class="box" @click="show = true">
        <div class="ico">
          <img src="../../assets/address2.png" alt="" />
        </div>
        <div class="word">
          <p>{{ nowaddress }}</p>
        </div>
        <span class="pull-right"></span>
      </div>
    </section>
    <section class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div class="left">
            <div class="img">
              <img src="../../assets/pic3.jpg" alt="" />
            </div>
            <div class="par">
              <div class="par-t">
                <p class="name">{{ item.name }}</p>
                <p>{{ item.sel }}</p>
              </div>
              <div class="par-b">￥{{ item.price / 100 }}</div>
            </div>
          </div>
          <div class="right">x{{ item.num }}</div>
        </li>
      </ul>
    </section>
    <section class="add">
      <van-action-sheet v-model="show" title="选择地址">
        <div class="content">
          <van-address-list
            v-model="chosenAddressId"
            :list="address"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            @click-item="onAddress"
          />
        </div>
      </van-action-sheet>
    </section>
    <footer>
      <van-submit-bar
        :price="resultprice"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </footer>
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import { userOrder } from "@/http/api";
export default {
  data() {
    return {
      list: [],
      address: [],
      resultprice: 0,
      show: false,
      chosenAddressId: "0",
      nowaddress: "",
      newlist:[],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/shop" });
      localStorage.removeItem("payment");
    },
    onClickRight() {
      Toast("按钮");
    },
    onAdd() {
      Toast("新增地址");
      //   this.show = true;
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
      console.log(item);
    },
    //选择地址
    onAddress(item, index) {
      console.log(item, index);
      this.nowaddress = item.address;
    },
    //提交订单
    onSubmit() {
      let allorder = this.newlist;
      Dialog.confirm({
        title: "支付",
        message: "确认支付吗",
      })
        .then(() => {
          Toast("支付成功");
          let token = localStorage.getItem("token");
          localStorage.setItem("allorder",JSON.stringify(allorder));
          userOrder('/user/userorder',{token,allorder}).then(data=>{
            if(data.code==200){
              console.log(data);
            }else{
              console.log(data.msg);
              return;
            }
          })
          localStorage.removeItem("payment");
          this.$router.push({ path: "/allorder" });
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取数据
    getdata() {
      let count = 0;
      let list = JSON.parse(localStorage.getItem("payment"));
      let address = JSON.parse(localStorage.getItem("address"));
      if (address.length > 0) {
        this.address = address;
        this.nowaddress = address[0].address;
      }
      this.list = list;
      list.forEach((item) => {
        count += item.num * item.price;
      });
      this.resultprice = count;
      // console.log(typeof address[0].id);
      console.log(list);
    },
    //获取用户历史订单数据
    getbeforedata(){
      let allorder = JSON.parse(localStorage.getItem("allorder"));
      let arr =[];
      if(allorder==null){
         arr = this.list
      }else{
        arr = allorder.unshift(this.list)
      }
      arr.forEach(item=>{
        let key = Symbol()
        item.key = key;
      })
      this.newlist = arr
    },
  },
  created() {
    this.getdata();
  },
  mounted(){
    this.getbeforedata();
  },
};
</script>

<style lang="scss">
@import "@/static/css/payment.scss";
@import "@/static/css/base.scss";
</style>